<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="ResetFrom" status-icon ref="ResetFrom">
        <el-row>
          <el-col :span="12">
            <div class="depart-box">
              <div class="slect-title">时间范围</div>
              <el-date-picker
                v-model="EstablishTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('ResetFrom')"
        />
        <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search"/>
      </div>
    </div>
    <!-- 导出按钮 -->
    <div class="add-btns">
      <kt-button
        :label="$t('action.exportExcel')"
        perms="customerstatistics:studentResourcesMonth:exportExcel"
        type="primary"
        @click="exportFile"
      />
    </div>
    <!--表格内容栏-->
    <StTable
      class="table-width"
      :showBatchDelete="false"
      :loading="loading"
      :data="pageResult"
      :columns="columns"
      @findPage="findPage"
    ></StTable>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import StTable from "@/views/Core/StTable";
import api from "@/http/api";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from "axios";
import { baseUrl } from "@/utils/global";
import Cookies from "js-cookie";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    StTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      pageResult: {
        content: []
      },
      // 查询条件
      ResetFrom: {
        userName: "",
        userid: "",
        realName: "",
        phone: "",
        threeLevelDepartment: "",
        DateTime: "",
        dateEnd: "",
        dateStart: "",
        pageNum: 0,
        pageSize: 0,
        listUserId: []
      },
      EstablishTime: [],
      threeDept: "",
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "studentCreateTimeStr", label: "日期", minWidth: 80 },
        { prop: "twoLevelDepartmentStr", label: "二级部门", minWidth: 80 },
        { prop: "laiyuan", label: "客户来源", minWidth: 50 },
        { prop: "totalSum", label: "总量", minWidth: 50 },
        { prop: "aTypeSum", label: "A类", minWidth: 50 },
        { prop: "bTypeSum", label: "B+类", minWidth: 50 },
        { prop: "b1TypeSum", label: "B-类", minWidth: 50 },
        { prop: "cTypeSum", label: "C类", minWidth: 50 },
        { prop: "dTypeSum", label: "D类", minWidth: 50 },
        { prop: "eTypeSum", label: "已成单", minWidth: 50 },
        { prop: "otherTypeSum", label: "其他", minWidth: 50 }
      ],

      pageRequest: { pageNum: 1, pageSize: 8 },
      deptId: Cookies.get("threeLevelDeptId"),
      loading: false, // 加载标识
      student_data_from_options:[]
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }

      this.ResetFrom.pageSize = this.pageRequest.pageSize;
      this.ResetFrom.pageNum = this.pageRequest.pageNum;

      this.$api.student
        .studentTypeStatisticsMonth(this.ResetFrom)
        .then(res => {
          //以下3个返回参数，需要根据自己业务去判断，处理返回信息
          let result = res.result;
          let errorCode = res.errorCode;
          let msg = res.msg;
          let content = {
            content: res.studentTypeStatistics,
            totalSize: res.total
          };
          this.pageResult = content;
          this.loading = false;
          
          // 客户来源对应
          this.pageResult.content.forEach(item => {
            // 去掉日
          item.studentCreateTimeStr = /\d{4}-\d{1,2}/g.exec(
            item.studentCreateTimeStr      
          );
            this.student_data_from_options.forEach(type_item => {
              if (type_item.key == item.dataFrom) {
                item.laiyuan = type_item.value;
              }else if(item.dataFrom=='000'){
                item.laiyuan ='其他来源'
              }
            });
          });
        })
        .then(data != null ? data.callback : "");
    },

    // 重置
    reset(ResetFrom) {
      this.$refs.ResetFrom.resetFields();
      this.EstablishTime = "";
      this.ResetFrom.userName = "";
      this.pageRequest.pageNum = 1;
      this.ResetFrom.startTime = '';
      this.ResetFrom.endTime = '';
      this.findPage(null);
    },
    // 查询
    search() {
      this.ResetFrom.startTime = this.EstablishTime[0];
      this.ResetFrom.endTime = this.EstablishTime[1];
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 导出
    exportFile() {
      axios({
        method: "get",
        url: baseUrl + "/studentTypeStatistics/exportDataFromTypeStatistics?type=2",
        params: this.ResetFrom
      }).then(res => {
        window.open(res.request.responseURL);
      });
    },
    // 获取来源
    get_student_data_from() {
      this.student_data_from_options = JSON.parse(
        localStorage.getItem("studentSource")
      );
    }
  },
  mounted() {
    this.get_student_data_from();
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style scope>
.add-btns .el-button:nth-child(1) {
  margin-right: 10px;
}
</style>

